<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 将lastName+firstName拼接称为姓名 -->

        姓: <input type="text" v-model="firstName" >
        名: <input type="text" v-model="lastName">
        <!-- 插值语法实现 -->
        全名：<span>{{firstName}}-{{lastName}}</span>
        <hr>

        <!-- methods实现 括号不能省略-->
        <!-- 全名: <span>{{fullName()}}</span> -->

        全名: <span>{{fullName}}</span>

    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                firstName: '张',
                lastName: '三',
            }
        },
        methods: {
            /* fullName() {
                return this.firstName + '-' + this.lastName;
            } */
        },
        //计算属性
        computed: {
            //函数名可以当做属性名来使用
            fullName() {
                return this.firstName + '-' + this.lastName;
            }
        }
    })

</script>